<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>(点击制定)制定产品生产工序设计单</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/bootstraptable/bootstrap-table.css" rel="stylesheet">
    <style>
        .text_bottom_border {
            border: none;
            border-bottom: 1px solid black;
        }

        .text_no_border {
            border: none;
        }
    </style>
</head>
<h5 style="color: #3e79b6">您正在做的业务是：生产管理--产品生产工序设计--制定产品生产工序设计单</h5>
<div class="container" style="margin-top: 20px;">
    <div style="text-align: right;" id="manufacture_process_div">
        <button type="button" id="add_btn" class="btn btn-default">添加工序</button>
        <button type="button" id="remove_btn" class="btn btn-default">删除工序</button>
        <button type="button" id="preview_btn" class="btn btn-default">预览</button>
        <button type="button" id="submit_btn" class="btn btn-default">确定</button>
        <button type="button" class="btn btn-default" onclick="history.back(-1); ">返回</button>
    </div>
    <div class="panel panel-default" style="margin-top: 10px;">
        <form id="manufacture_form" class="form-horizontal">
            <div class="panel-heading">
                <div class="panel-title">
                    <h2 style="text-align: center;">生产工序设计单</h2>
                </div>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">产品名称：</label>
                        <div class="col-sm-8">
                            <input type="text" name="productName" id="productName"
                                   class="form-control text_no_border"
                                   style="background-color: white"
                                   readonly>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">产品编号：</label>
                        <div class="col-sm-8">
                            <input type="text" name="productId" id="productId"
                                   class="form-control text_no_border"
                                   style="background-color: white"
                                   readonly>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="designer" id="designer"
                                   class="form-control text_bottom_border"
                            >
                        </div>
                    </div>
                </div>
                <!--工序物料明细-->
                <table class="table table-bordered table-striped" data-toggle="table" id="manufacture_details_table">
                    <thead>
                    <tr>
                        <th data-field="detailsNumber" data-formatter="formatChk">点选</th>
                        <th data-field="procedureName">工序名称</th>
                        <th data-field="procedureId">工序编号</th>
                        <th data-field="procedureDescribe">描述</th>
                        <th data-field="labourHourAmount" data-formatter="formatText">工时数</th>
                        <th data-field="amountUnit" data-formatter="formatAmount">单位</th>
                        <th data-field="costPrice" data-formatter="formatPrice">单位工时成本</th>
                        <th data-field="subtotal">工时成本小计（元）</th>
                    </tr>
                    </thead>
                </table>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="register" id="register"
                                   class="form-control text_bottom_border"
                            >
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记时间：</label>
                        <div class="col-sm-8">
                            <input type="text" name="registerTime" id="registerTime" class="form-control"
                                   style="border: none;background-color: white" readonly/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8">
                        <label class="col-sm-3 control-label">设计要求：</label>
                        <div class="col-sm-9">
                            <textarea rows="3" cols="100" class="form-control"
                                      style="resize: none;overflow-y: scroll" name="procedureDescribe"
                                      id="procedureDescribe"></textarea>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>


    <!--显示添加生产工序的模态框，查询所有的工序信息-->
    <div class="modal fade " id="process_modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">
                        <div class="col-md-4">
                            <h3>工序</h3>
                        </div>
                        <div class="col-md-8">
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <!--查询数据表格-->
                    <table id="manufacture_process_list_table"></table>

                </div>
                <div class="modal-footer">
                    <button type="button" id="manufacture_back_btn" class="btn btn-default col-md-2 col-md-offset-10">
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<script src="/js/currentTime.js"></script>

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    $(function () {
        //获取产品编号的id
        let id = localStorage.getItem("id")
        $.post("/design/file/getMaterialOne", {"id": id}, function (res) {
            $("#manufacture_form #productId").val(res.productId)
            $("#manufacture_form #productName").val(res.productName)
            $("#manufacture_form #register").val(res.register)
        })
        //获取登记时间
        $("#manufacture_form #registerTime").val(add(fortime()))

        //模态框的属性设置
        $("#process_modal").modal({
            backdrop: false,
            keyboard: false,
            show: false
        })

        //点击物料删除按钮
        $("#manufacture_process_div #remove_btn").click(function () {
            //获取所有选中的复选框
            let check_ary = $("#manufacture_form #manufacture_details_table :checkbox[name='detailsNumber']:checked")
            //如果没有选中复选框
            if (check_ary.length == 0) {
                alert("请先选中要删除的物料明细")
                return
            }
            //选中复选框
            //获取所有复选框对象
            let checks = $("#manufacture_form #manufacture_details_table :checkbox[name='detailsNumber']")
            //获取所有数据行
            let data = $("#manufacture_form #manufacture_details_table").bootstrapTable("getData")
            for (let i = checks.length - 1; i >= 0; i--) {
                //判断是复选框否选中
                if (checks[i].checked) {
                    // 先删除data数组对应的对象
                    data.splice(i, 1)
                    // 再删除表格的tr
                    $(checks[i]).parent("td").parent().remove()
                }
            }
        })

        //点击预览按钮
        $("#manufacture_process_div #preview_btn").click(function () {
            //获取所有数据行
            let data = $("#manufacture_form #manufacture_details_table").bootstrapTable("getData")
            //获取所有复选框对象
            let checks = $("#manufacture_form #manufacture_details_table :checkbox[name='detailsNumber']")
            // 获取所有的工时文本框
            let labourHourAmounts = $("#manufacture_form #manufacture_details_table input[name='labourHourAmount']")
            //获取所有的成本文本框
            let costPrices = $("#manufacture_form #manufacture_details_table input[name='costPrice']")
            //获取所有单位文本框
            let amountUnits = $("#manufacture_form #manufacture_details_table input[name='amountUnit']")
            for (let i = 0; i < data.length; i++) {

                // 计算明细小计
                data[i].subtotal = parseInt(data[i].costPrice) * parseInt(data[i].labourHourAmount)
                console.log("小计", data[i].subtotal)
                // // 更新小计单元格
                $(checks[i]).parent("td").siblings(":last").html(data[i].subtotal)

                // 更新点选复选框所在的单元格
                $(checks[i]).parent("td").html((i + 1))
                // 更新工时文本框所在的单元格
                $(labourHourAmounts[i]).parent("td").html($(labourHourAmounts[i]).val())
                // 更新成本文本框所在的单元格
                $(costPrices[i]).parent("td").html($(costPrices[i]).val())
                // 更新单位文本框所在的单元格
                $(amountUnits[i]).parent("td").html($(amountUnits[i]).val())
                $("#manufacture_process_div #add_btn").css("display", "none")
                $("#manufacture_process_div #remove_btn").css("display", "none")
            }

        })

        //点击确定按钮
        $("#manufacture_process_div #submit_btn").click(function () {
            let process_details = $("#manufacture_details_table").bootstrapTable("getData")
            let obj=$("#manufacture_process_list_table").bootstrapTable("getData")
            console.log("table", process_details)
            console.log("物料表格：", obj)
            let process_dto = {
                "productId": $("#manufacture_form #productId").val(),
                "productName": $("#manufacture_form #productName").val(),
                "designer": $("#manufacture_form #designer").val(),
                "register": $("#manufacture_form #register").val(),
                "registerTime": $("#manufacture_form #registerTime").val(),
                "procedureDescribe": $("#manufacture_form #procedureDescribe").val()
            }
            process_dto.process = process_details

            console.log("数据",process_dto)
            //利用原生Ajax发送请求
            $.ajax({
                url: "/manufacture/process/addProcess",
                type: "post",
                data: JSON.stringify(process_dto),
                contentType: "application/json",
                success: function (data) {
                    if (data) {
                        window.location = "manufacture_produce_processUI"
                    }
                }
            })
        })


        //点击模态框里面的返回按钮
        $("#manufacture_back_btn").click(function () {
            $("#process_modal").modal("hide")
        })

        //点击添加工序按钮
        $("#manufacture_process_div #add_btn").click(function () {
            //弹出模态框
            $("#process_modal").modal("show")

            //发送查询所有工序的请求
            $("#process_modal #manufacture_process_list_table").bootstrapTable({
                method: "post",
                contentType: "application/x-www-form-urlencoded",
                url: "/manufacture/process/queryProcess",
                // 数据行交替样式
                striped: true,
                // 是否是服务器端分页：server表示服务器端，client表示前端分页
                sidePagination: 'server',
                // 表格列标题
                columns: [{
                    title: "工序编号",
                    field: "procedureId"
                }, {
                    title: "工序名称",
                    field: "procedureName"
                }, {
                    title: "工序描述",
                    field: "procedureDescribe"
                }, {
                    title: "添加",
                    formatter: function (value, row, index) {
                        // js对象转化成json字符串
                        let json = JSON.stringify(row)
                        let html = "<a href='javascript:addProcess(" + json + ")'>添加</a>"
                        return html
                    }
                }]
            })
        })
    })

    //模态框里面点击添加工序明细
    function addProcess(process) {

        // 获取物料明细表格的所有数据
        let data = $("#manufacture_form #manufacture_details_table").bootstrapTable("getData")


        // 标志位
        let index = -1
        for (let i = 0; i < data.length; i++) {
            if (process.procedureId === data[i].procedureId) {
                index = i
                break
            }
        }
        if (index === -1) {
            // 向物料明细表格中添加一行
            $("#manufacture_form #manufacture_details_table").bootstrapTable('append', process)

        }
    }


    // 格式化"点选"单元格
    function formatChk(value, row, index) {
        return "<input type='checkbox' name='detailsNumber'>"
    }

    // 格式化"工时数"文本框
    function formatText(value, row, index) {
        return `<input type='text' class='form-control' name='labourHourAmount' value=''
                    onblur="changeAmount(this)">`
    }

    // "工时数"文本框失去焦点的事件
    function changeAmount(param) {
        // 文本框的数量
        let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#manufacture_form #manufacture_details_table").bootstrapTable("getData")
        // 修改对应对象的labourHourAmount
        data[index].labourHourAmount = parseInt(val)
    }

    //格式化单位
    function formatAmount(value, row, index) {
        return "<input type='text' name='amountUnit' onblur='changeAmountUnit(this)'>"
    }

    function formatPrice(value, row, index) {
        return "<input type='text' name='costPrice' onblur='changePrice(this)'>"
    }

    //工时价格失去焦点事件
    function changePrice(parms) {
        // 文本框的数量
        let val = $(parms).val()
        // 获取文本框所在的行索引
        let index = $(parms).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#manufacture_form #manufacture_details_table").bootstrapTable("getData")
        // 修改对应对象的labourHourAmount
        data[index].costPrice = parseInt(val)
    }

    //单位失去焦点事件
    function changeAmountUnit(parms) {
        // 文本框的数量
        let val = $(parms).val()
        // 获取文本框所在的行索引
        let index = $(parms).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#manufacture_form #manufacture_details_table").bootstrapTable("getData")
        // 修改对应对象的labourHourAmount
        data[index].amountUnit = val
    }
</script>
</body>
</html>